<template>
 <div class="parent">
  <!--自定义指令 -->
  <h2 v-color>{{msg}}</h2>
  {{fullMessage}}
  <button @click="clickBut"></button>
  <!--链接跳转 -->
  <router-link :to="{path:'/'}">Hello ts</router-link>
 </div>
</template>
<script lang="ts">
import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator';
import child from '@/test/vue-decorator/child.vue';

@Component({
  directives: {
    color: {
      inserted: function(el){
        el.style.color = '#4fc08d';
      }
    }
  },
  components: {
    child
  }
})
export default class parent extends Vue {
  //来自子类的值
  @Prop({default:'', type: String})
  message;
  msg: string = "父类, welcome to  your vue app";

  create() {
    console.log('初始化加载create()方法');
  }

  get fullMessage(){
    return `${this.message} from Typescript`;
  }

  beforeRouteEnter(to, from, next) {
    console.log('route跳转之前');
  }

  beforeRouteLeave(to, from, next) {
    console.log('route跳转之后');
  }

  clickBut() {
    console.log('触发点击事件');
  }

}
</script>
